{extend name='base' /}

{block name='main'}
<style>
    .table {
        font-size: 13px;
    }

    .table td {
        vertical-align: middle;
    }

    .book-img {
        width: 50px;
        height: 70px;
    }

    .price {
        font-size: 1.3rem;
    }
    form.order-form{
        width: 100%;
    }
</style>
<div class="row m-0">
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th width="70">封面</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
            </thead>
            <tbody>
            {foreach $cart as $k => $v}
            <tr>
                <td>
                    <img src="{$v['thumb']}" class="book-img">
                </td>
                <td>{$v['bname']}</td>
                <td>{$v['price']}</td>
                <td>{$v['number']}</td>
                <td class="text-danger">¥{$v['money']}</td>
            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
    <form class="order-form mt-2 mb-3">
        <div class="form-group d-flex align-items-center">
            <div style="width: 120px;">
                合计金额 <span class="text-danger">*</span>
            </div>
            <div class="form-control" style="border: none"><span id="total_price" class="price text-danger">¥{$total}</span></div>
        </div>
        <div class="form-group d-flex align-items-center">
            <div style="width: 120px;">
                账号余额 <span class="text-danger">*</span>
            </div>
            <div class="form-control" style="border: none">
                ¥ {$user['money']}
            </div>
        </div>
        <div class="form-group d-flex align-items-center">
            <div style="width: 120px;">
                收货地址 <span class="text-danger">*</span>
            </div>
            <select id="address" name="data[address_id]" class="form-control" style="width: 40%;" required>
                {foreach $address as $k => $v}
                <option value="{$v['id']}" {if $v.is_default==1}selected{/if}>{$v['address']}</option>
                {/foreach}
            </select>
        </div>
        <div class="form-group d-flex align-items-center">
            <div style="width: 120px;">
                支付密码 <span class="text-danger">*</span>
            </div>
            <input type="password" class="form-control" name="data[payword]" value="" style="width: 40%;">
        </div>
        <div class="form-group d-flex align-items-center">
            <div style="width: 120px;">
                验证码 <span class="text-danger">*</span>
            </div>
            <div class="row m-0" style="width: 40%;">
                <input type="text" name="data[captcha]" class="form-control media-body" required id="captcha">
                <img src="{:url('User/captcha')}" onclick="refresh(this)" style="cursor: pointer;">
            </div>
        </div>
        <input type="hidden" name="data[cartid]" value="{$cartid}">
        <button type="button" class="btn btn-danger pay-btn">立即支付</button>
    </form>
</div>
{/block}

{block name='js'}
<script>
$(function () {
    let lock = false;
    $(".pay-btn").on('click', function () {
        if (lock) {
            return;
        }
        lock = true;
        $.post("{:url('Order/add')}", $(".order-form").serialize(), function (res) {
            if (res.code == 0) {
                refresh($('#captcha').next().eq(0));
                swal("提示", res.msg, {
                    icon : "error",
                    buttons: {
                        confirm: {
                            className : 'btn btn-danger',
                            text : '确定',
                        }
                    },
                });
            } else{
                swal("提示", res.msg, {
                    icon : "success",
                    buttons: {
                        confirm: {
                            className : 'btn btn-success',
                            text : '确定',
                        }
                    }
                }).then(function () {
                    window.location.replace("{:url('User/order')}");
                });
            }
            lock = false;
        }, 'json');
    });
});
function refresh(obj) {
    $(obj).attr('src', "{:url('User/captcha')}?rand="+Math.random())
}
</script>
{/block}